<template>
  <div id="officialPublication">
    <div class="offPubMainOut">
      <div class="titConts">
        <div class="leftBack"></div>
        <div class="flexContd">
          <p>PRODUCTS & SERVICE</p>
          <span></span>
          <p>产品与服务</p>
        </div>
      </div>

      <div class="offPubMain">
        <div class="mainCont">
          <div class="divUlCont">
            <ul>
              <li @click="routerUp('/CreatAPool')">CREAT A POOL</li>
              <li>POOL ATTRUBUTES</li>
              <li @click="routerUp('/Products')">PAYMENT DEtAILS</li>
              <li style="background: linear-gradient(90deg, #0bc288, #fff664)">
                CONFIRMATION
              </li>
            </ul>
          </div>
          <div class="lisicinre">
            <div class="depositContent">
              <div class="depositContent1">
                <p class="tit">你想提取多少钱</p>
                <p class="desc">
                  在这里您可以设置提取金额。您可以手动输入特定的金额或使用下面的百分比按钮。
                </p>
                <p class="desc">
                  申请提币后72小时，方可提币！
                </p>
                <input type="text" v-model="selecVal" />
                <div class="baifenBlockCont">
                  <div
                    :class="selecIndex == 25 ? 'baifenBlock1' : 'baifenBlock'"
                    @click="cunNumFunc(25)"
                  >
                    25%
                  </div>
                  <div
                    :class="selecIndex == 50 ? 'baifenBlock1' : 'baifenBlock'"
                    @click="cunNumFunc(50)"
                  >
                    50%
                  </div>
                  <div
                    :class="selecIndex == 75 ? 'baifenBlock1' : 'baifenBlock'"
                    @click="cunNumFunc(75)"
                  >
                    75%
                  </div>
                  <div
                    :class="!selecIndex ? 'baifenBlock1' : 'baifenBlock'"
                    @click="cunNumFunc()"
                  >
                    MAX
                  </div>
                </div>
                <div class="flexContText">
                  <div>
                    <span>可获得奖励</span>
                    <span>{{ earned }} BTR</span>
                  </div>
                  <div>
                    <span>可提取资金</span>
                    <span>{{ balanceOf }} CFN</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="creatBtnCont">
              <button class="creatBtn" @click="shenqingFunc">申请</button>
              <button class="creatBtn" @click="tiquFunc">提取</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer-con />
  </div>
</template>
<style lang="scss" scoped>
@import "@/asserts/styles/officialPublication/officialPublication.scss";
</style>
<script>
import FooterCon from "@/containers/common/Footer.vue";

const Web3Utils = require("web3-utils");
let NoMintRewardPool = require("../NoMintRewardPool.json");
export default {
  data() {
    return {
      myAddress: "",
      balanceOf: 0,
      earned: 0,
      selecIndex: "",
      selecVal: "0",
    };
  },
  methods: {
    // 路由跳转
    routerUp(uri) {
      this.$router.push({
        path: uri,
      });
    },
    cunNumFunc(num) {
      this.selecIndex = num;
      this.selecVal = this.balanceOf;
      if (num) {
        this.selecVal = (this.balanceOf * num) / 100;
      }
    },
    initFunc() {
      // 质押token余额
      this.myAddress = window.myWeb3.eth.coinbase.toLowerCase();

      // window.myWeb3.eth.getBalance("0x82d30e24708318c5da73accb7cebc1d0a1d86276",(error,res)=>{
      //   console.log('####',error,res.toString(10)); // instanceof BigNumber
      // });

      window.contractInstance.balanceOf(this.myAddress, (error, log) => {
        if (!error) {
          console.log("balanceOf toString", log.toString());
          console.log("balanceOf fromWei", Web3Utils.fromWei(log.toString()));
          this.balanceOf = Web3Utils.fromWei(log.toString());
          this.selecVal = this.balanceOf;
        }
      });

      // 从上次获取奖励到当前时间，可以获得奖励的总数
      window.contractInstance.earned(this.myAddress, (error, log) => {
        if (!error) {
          console.log("earned toString", log.toString());
          console.log("earned fromWei", Web3Utils.fromWei(log.toString()));
          // this.earned = Web3Utils.fromWei(log.toString());
          this.earned = log.toString() / 100000000;
        }
      });
    },
    shenqingFunc() {
      let _this = this;
      let valueToWei = Web3Utils.toWei(this.selecVal + "");
      let valueToHex = Web3Utils.toHex(valueToWei);

      window.contractInstance.withdrawApplication(
        valueToHex,
        function (error3, resHash) {
          if (error3) throw error3;
          console.log("Staked", resHash.toString());
          _this.openShenqing(resHash.toString());
        }
      );
    },
    tiquFunc() {
      let _this = this;
      let valueToWei = Web3Utils.toWei(this.selecVal + "");
      let valueToHex = Web3Utils.toHex(valueToWei);
      if (this.selecVal == this.balanceOf) {
        window.contractInstance.exit(function (error3, resHash) {
          if (error3) throw error3;
          console.log("Staked", resHash.toString());
          _this.open(resHash.toString());
        });
      } else {
        window.contractInstance.withdraw(
          valueToHex,
          function (error3, resHash) {
            if (error3) throw error3;
            console.log("Staked", resHash.toString());
            _this.open(resHash.toString());
          }
        );
      }
    },
    open(hash) {
      this.$alert("交易hash： " + hash + " ", "提取提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$router.push({ path: "/" });
        },
      });
    },
    openShenqing(hash) {
      this.$alert("申请72后方可提币  交易hash： " + hash + " ", "申请提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$router.push({ path: "/" });
        },
      });
    },
  },
  mounted() {
    this.initFunc();
  },
  components: {
    "footer-con": FooterCon,
  },
  computed: {},
};
</script>
